<template>
  <div class='container'>
    <van-nav-bar title="首页布局"
                 fixed />
    <!-- 测试信息 -->
    <div>
      <van-cell-group>

        <van-cell>
          <router-link slot="default"
                       :to="{ name: 'index', params: { name: 'index' }}">首页
          </router-link>
        </van-cell>

        <van-cell>
          <router-link slot="default"
                       :to="{ name: 'articleList', params: { name: 'articleList' }}">
            articleList
          </router-link>
        </van-cell>

        <van-cell>
          <router-link slot="default"
                       :to="{ name: 'articleDetail', query: { name: 'articleDetail' } }">
            articleDetail
          </router-link>
        </van-cell>

      </van-cell-group>
    </div>

    <div class="van-hairline--surround testInfo">

      <div>
        当前用户ID：{{this.$store.state.code}}
      </div>
      <div>
        系统配置参数 baseUrl ：{{ this.$store.state.appConfig.baseUrl }}
      </div>
      <div>
        系统配置参数 appName ：{{ this.$store.state.appConfig.appName }}
      </div>
      <div>
        系统配置参数 copyright ：{{ this.$store.state.appConfig.copyright }}
      </div>
      <div>
        系统配置参数 version ：{{ this.$store.state.appConfig.version }}
      </div>
      <div>
        系统配置参数 appName ：{{ this.$store.state.appConfig.appName }}
      </div>
      <div>{{this.moment().format('YYYY年MM月DD日 h:mm:ss a')}}</div>

    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
import { getMyCategoryList } from '@/service/demo'
export default {
  components: {
    getMyCategoryList
  },
  // 组件名称
  name: 'Index',
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    getMyCategoryList().then(res => {
      console.log(res)
    }).catch(res => {
      console.log(res)
    })
  },
  methods: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.testInfo div {
  padding: 100px 0px;
}
</style>
